/**
 * @description  : 分页listview组件
 * @descriptionDetail : 分页listview组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 17:24:29
 */
<template>
  <mescroll-body
    :top="top"
    :down="downOption"
    :up="upOption"
    :height="height"
    :ref="'mescrollRef'+i"
    @init="mescrollInit"
    @down="downCallback"
    @up="upCallback"
    @emptyclick="emptyClick"
  >
    <view v-for="(it, idx) in listDatas" :key="idx">
      <slot :data="it" :index="idx"></slot>
    </view>
  </mescroll-body>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";

export default {
  mixins: [MescrollMixin,MescrollMoreItemMixin,], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
  props:{
    initLoad: { // 是否自动加载列表数据
      type: Boolean,
      default: true,
    },
    top: {  // 列表距离顶部高度
      type: [String,Number],
      default: 0,
    },
    height:{
      type: String,
      default: "100%",
    },
    loadData: { // 加载列表数据
      type: Function,
      default: null,
    },
    showEmpty:{
      type: Boolean,
      default: true,
    },
    noMoreSize:{
      type: Number,
      default:4,
    },
    emptyClick: { // 空白页按钮点击事件
      type: Function,
      default: function() {},
    },
  },
  data() {
    return {
      downOption:{
        auto: this.initLoad,
      },
      upOption:{
        auto: this.initLoad, // 默认自动加载
        textLoading: '加载中 ...', // 加载中的提示文本
        textNoMore: '没有更多数据了', // 没有更多数据的提示文本
        offset: 150, // 距底部多远时,触发upCallback,仅mescroll-uni生效 ( mescroll-body配置的是pages.json的 onReachBottomDistance )
        noMoreSize: this.noMoreSize, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty:{
          use: this.showEmpty,
          icon: require("@/static/mescroll-empty.png"),
          tip: '~ 暂无数据 ~', // 提示
          // btnText: '去看看',
        },
      },
      listDatas: [], // 列表数据
    }
  },

  created() {
    console.log("me-table", this);
  },
  methods: {
    /* 下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    /* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      console.log("列表序号", this.seq, "page.size", page.size, "page.num", page.num);
      this.loadData(page).then(dr => {

        let l = page.num == 1 ? [...dr.data,] : [...this.listDatas, ...dr.data,];
        this.listDatas = this.$u.deepClone(l);

        if(dr.count > 0){
          this.mescroll.endBySize(dr.data.length, dr.count);
        }else{
          this.mescroll.endSuccess(dr.data.length);
        }
      }).catch((err) => {
        console.error(err);
        this.mescroll.endErr();
      })
    },
    /**
     * 滚动到指定位置
     * y: 可以传入位置(eg. 500), 或者css选择器(eg. li)
     * time: 过渡时间
     */
    scrollTo(y, time) {
      this.mescroll.scrollTo(y, time);
    },
    /** 返回当前的滚动table对象，方便调用mescroll原生方法 */
    getMescroll() {
      return this.mescroll;
    },
    /** 刷新列表数据 */
    refresh() {
      console.log("触发刷新");
      this.mescroll.triggerDownScroll(); //主动触发下拉刷新
    },
  },
}
</script>
